<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>css样式表</title>
		<!--css样式表需要写在style标签中-->
		<!--
        	CSS对大小写不敏感，且忽略空格
			如果属性值是有多个单词组成的词组表达一个具体的含义时，
			需要给这个词组加上双引号，例如font-family:"Times New Roman"

        -->
		<!--
        	css样式根据位置不同分为：
        	内联样式 --- 标签的style属性
        	内部样式 --- 写在html页面中的 style样式表
        	外部样式 --- 写在专门css文件中的样式，并使用link进行引入。
        -->	
        <!--使用link标签导入外部的css样式表-->
        <link rel="stylesheet" href="css/base.css" />
        
		<style type="text/css">
		/*
		 * css中注释使用 /* * /进行注释
		 
		 */
		/*选择器 {
				对象的属性1: 属性值1;
				对象的属性2: 属性值2;
				…
			}			
			*/
			/*css样式的选择器*/
			/*
			1、标签选择器:*/
			td{
				background-color: red;
				font-family: "隶书";
			}
			/*2、类选择器
			 类选择器优先级高于标签选择器
			*/
			/*语法:
			.类选择器的名字{
				属性:属性值;
				...
			}
			在空间中可以使用class属性将类选择器的样式导入
			* */
			.myStyle{
				width: 120px;
				height: 30px;
			}
			.tdStyle{
				background-color: blue;
				font-family: "宋体";
			}
			/*3、id选择器*/
			/*语法:
			#标签id名{
				属性:属性值;
				...
			}*/
			#tdSex{
				background-color: bisque;
				font-family: "微软雅黑";
			}
			
			
			/*
			 * 依照：范围最小有限和就近原则。
			 上述三种基本选择器的优先级：
			 id选择器 > 类选择器 > 标签选择器
			 * */
			/*4、派生选择器*/
			/*
			 由上述三种基本选择器组合而成的就是派生选择器。
			 
			 * */
			td div select{
				/*所有的包涵在 td 标签中的 select标签的样式*/
				width: 150px;
			}
			
			#tdSex p{
				font-family: "楷体";
				color: aqua;
			}
		</style>
	</head>

	<body>
		<!--form表单：客户端浏览器用来向服务器端进行信息提交的标签
			写在form表单的标签的值才会被提交给服务器
			action -- 指定的是服务器端的那个程序（类-方法）进行响应；
			method -- 使用哪种方式进行数据从客户端发送到服务器。
			      选项：get -- 将客户端数据信息附加在访问连接url的尾端进行发送信息；
			                 缺点：需要附加在url之后，可能会以明文的形式显示，信息不安全；
			                长度会受到限制（不能大于255个制度） 
			                汉字容易乱码（字节流方式传输）
			       post -- 将客户端数据信息以数据包的形式发送到服务器端
			                 不在上述问题。
		-->
		<div align="center">
			<form action="#" method="get">
				<table border="1" cellpadding="0" cellspacing="0" bordercolor="#AAD7DB" style="width: 80%; align-self: center;">
					<tbody>
						<tr>
							<td style="background-color: aqua;">姓名</td>
							<td ><input class="myStyle" disabled="disabled" type="text" id="txtName" name="txtName" /></td>
						</tr>
						<tr>
							<td class="tdStyle">登录密码</td>
							<td><input readonly="readonly" type="password" id="txtPsw" name="txtPsw" /></td>
						</tr>
						<tr>
							<td id="tdSex"><p>性别</p></td>
							<!--radio类型的输入框：需要name属性值一样，才具有互斥选择性-->
							<td><input type="radio" id="radSex" checked="checked" name="radSex" /> 女
								<input type="radio" id="radSex2" name="radSex" />男
								<input type="radio" id="radSex3" name="radSex" />未知</td>
						</tr>

						<tr>
							<td>个人简历</td>
							<td><input type="file" id="fileResume" name="fileResume" /></td>
						</tr>
						<tr>
							<td>兴趣爱好</td>
							<!--checkbox多选框：需要name属性保持一致；服务器是使用数组对一组checkbox控件的值进行接收的-->
							<td><input type="checkbox" id="chHobby1" name="chHobby" />游泳
								<input type="checkbox" id="chHobby2" name="chHobby" />爬山
								<input type="checkbox" id="chHobby3" checked name="chHobby" />dota
								<input type="checkbox" id="chHobby4" name="chHobby" />coding
								<input type="checkbox" id="chHobby5" name="chHobby" />testing</td>
						</tr>
						<tr>
							<td>隐藏控件</td>
							<td><input style="" type="hidden" name="txthidden" id="txthidden" value="520" /></td>
						</tr>
						<tr>
							<td>学历</td>
							<td>
								<div>
								<select id="selectXL" name="selectXL">
									<option value=""></option>
									<option value="DZ">大专</option>
									<option value="BK" selected>本科</option>
									<option value="SS">硕士</option>
									<option value="BS">博士</option>
								</select>
								</div>
							</td>
						</tr>
						<tr>
							<td>自我介绍</td>
							<td><textarea id="txtIntroduce" name="txtIntroduce" style="width: 200px;height: 60px;"></textarea></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td><input type="submit" value="提交" id="btnSubmit" /></td>
							<td><input type="reset" value="重置" id="btnSubmit" /></td>
						</tr>
					</tbody>
				</table>

			</form>
		</div>
	</body>

</html>